import "./index.scss";
import { h, getCurrentInstance, defineComponent, type PropType } from "vue";
import { PxTableColumn, PxButton } from "px-ui";
import ReTableCloumn from "@/components/ReTableCloumn";
import ReTableTag from "@/components/ReTableTag";

const props = {
  column: {
    type: Object as PropType<CommonTable.TableCloumnsType>,
    require: true
  }
};

export default defineComponent({
  name: "ReTableColumnMultistage",
  props,
  setup(props) {
    if (!props.column) return null;

    const defaultColumn = (scope: any, column: any, columText?: string | number | null | undefined) => {
      if (!column) return null;
      const { rowStyle = null, prop = "", getColumText = null } = column;
      const { row = null } = scope;
      if (getColumText && typeof getColumText === "function") {
        columText = columText === 0 ? columText : columText || "--";
      } else {
        columText = row[prop] === 0 ? row[prop] : row[prop] || "--";
      }
      return h(
        "div",
        { class: "colum-item", style: rowStyle ? (typeof rowStyle === "function" ? rowStyle(scope) : rowStyle) : null },
        { default: () => columText }
      );
    };

    const defaultSlot = (scope, column) => {
      if (!column) return null;
      const { row = null } = scope;
      const {
        prop = "",
        render = null,
        defaultTagValue: defaultValue = "",
        tagType: type = "default", // tag 类型 目前两种   default  point
        tagMapOption: option = new Map(),
        getColumText = null,
        mapRow = null,
        cloumnClick = null,
        children = []
      } = column;
      const columText = row[prop] === 0 ? row[prop] : row[prop] || "--";
      if (children?.length) {
        return children.map(column => rtcm(column));
      } else if (render && typeof render === "function") {
        return h(ReTableCloumn, render(scope, getCurrentInstance()));
      } else if (option && option?.size) {
        const render = (scope: any) => {
          const { value = "", label = "" } = mapRow(scope);
          const getStyleFn = () => {
            return {
              display: "flex",
              alignItems: "center",
              justifyContent: "center"
            };
          };
          // if (!value) return () => <div style={getStyleFn()}>{"--"}</div>;
          return <div style={getStyleFn()}>{h(ReTableTag, { defaultValue, type, value, label, option })}</div>;
        };
        return h(ReTableCloumn, render(scope));
      } else if (cloumnClick && typeof cloumnClick === "function") {
        const text = true;
        const type = "primary";
        const onClick = () => cloumnClick && cloumnClick(scope);
        const prop = { class: "column-button", text, type, onClick };
        return h(PxButton, prop, () => columText);
      } else if (getColumText && typeof getColumText === "function") {
        const columText = getColumText(scope);
        return defaultColumn(scope, column, columText);
      } else {
        return defaultColumn(scope, column);
      }
    };

    const rtcm = column => {
      const {
        prop = "",
        render = null,
        label = "",
        fixed = undefined,
        sortable = false,
        width = 100,
        renderHeader = null,
        props = {},
        showOverflowTooltip = true
      } = column;
      const attr = {
        "min-width": width,
        label,
        prop,
        fixed,
        sortable,
        ...props
      };
      return h(
        PxTableColumn,
        { ...attr, showOverflowTooltip: render && typeof render === "function" ? false : showOverflowTooltip },
        {
          default: scope => defaultSlot(scope, column),
          header: scope =>
            renderHeader && typeof renderHeader === "function"
              ? h(ReTableCloumn, null, { default: renderHeader(scope, getCurrentInstance()) })
              : label
        }
      );
    };
    return () => rtcm(props.column);
  }
});
